<template>
  <el-card v-loading='loading'>
    <div class="f-row ai-c mb-2">
      <div class="btn-deep mr-2" @click="$router.push('/addPopularization')">
        添加
      </div>
      <div class="btn-light" @click="del_more">删除</div>
    </div>
    <div style="width: 100%">
      <tableAssembly
        :hasSelect="true"
        :data="dataList"
        :columns="columnsList"
        :pagination="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
        @selection-change="handlechange"
      ></tableAssembly>
    </div>
  </el-card>
</template>
<script>
import {
  encyclopedia,
  encyclopedia_del,
  encyclopedia_shenhe,
} from "@/request/api";
import tableAssembly from "@/components/common/tabbleAssembly.vue";
export default {
  components: {
    tableAssembly,
  },
  data() {
    return {
      multipleSelection: [], //勾选的数组
      // 分页
      pagination: {
        page: 1,
        rows: 10,
        total: 20,
        pageSizes: [10, 20],
      },
      // 表单数据
      dataList: [],
      // 表头数据
      columnsList: [
        {
          type: "index",
          label: "序号",
          width: "50",
        },
        {
          prop: "title",
          label: "健康科普标题",
          width: "300",
        },
        {
          prop: "status",
          label: "审核状态",
          width: "100", //-1草稿，0待审核，1审核通过，2审核拒绝,3撤回，4已发布
          render: (m) => {
            let val = null;
            switch (m.status) {
              case -1:
                val = "草稿";
                break;
              case 0:
                val = "待审核";
                break;
              case 1:
                val = "已通过";
                break;
              case 2:
                val = "已拒绝";
                break;
              case 3:
                val = "已撤回";
                break;
              case 4:
                val = "已发布";
                break;
            }
            return <div>{<span>{val}</span>}</div>;
          },
        },
        {
          prop: "createTime",
          label: "投稿时间",
        },
        {
          prop: "releaseTime",
          label: "发布时间",
        },
        {
          prop: "handle",
          label: "操作",
          fixed: "right", //-1草稿，0待审核，1审核通过，2审核拒绝,3撤回，4已发布
          render: (m) => {
            let val = null;
            switch (m.status) {
              case -1:
                val = (
                  <div>
                    <span
                      onClick={this.articleEdit.bind(this, m)}
                      class="btn-deep btn-edit mt-1"
                    >
                      编辑
                    </span>
                    <span
                      onClick={this.articleDetail.bind(this, m)}
                      class="btn-deep dt-clr mt-1"
                    >
                      查看
                    </span>
                    <span
                      onClick={this.articleSub.bind(this, m)}
                      class="btn-deep dp-ib mt-1"
                    >
                      提交
                    </span>
                    <span
                      onClick={this.articleDel.bind(this, m)}
                      class="btn-light dp-ib mt-1"
                    >
                      删除
                    </span>
                  </div>
                );
                break;
              case 0:
                val = (
                  <div>
                    <span
                      onClick={this.articleEdit.bind(this, m)}
                      class="btn-deep btn-edit mt-1"
                    >
                      编辑
                    </span>
                    <span
                      onClick={this.articleDetail.bind(this, m)}
                      class="btn-deep dt-clr mt-1"
                    >
                      查看
                    </span>
                    <span
                      onClick={this.articleDel.bind(this, m)}
                      class="btn-light dp-ib mt-1"
                    >
                      删除
                    </span>
                  </div>
                );
                break;
              case 1:
                val = (
                  <div>
                    <span
                      onClick={this.articleDetail.bind(this, m)}
                      class="btn-deep dt-clr mt-1"
                    >
                      查看
                    </span>
                  </div>
                );
                break;
              case 2:
                val = (
                  <div>
                    <span
                      onClick={this.articleDetail.bind(this, m)}
                      class="btn-deep dt-clr mt-1"
                    >
                      查看
                    </span>
                    <span
                      onClick={this.articleDel.bind(this, m)}
                      class="btn-light dp-ib mt-1"
                    >
                      删除
                    </span>
                  </div>
                );
                break;
              case 3:
                val = (
                  <div>
                    <span
                      onClick={this.articleDetail.bind(this, m)}
                      class="btn-deep dt-clr mt-1"
                    >
                      查看
                    </span>
                    <span
                      onClick={this.articleDel.bind(this, m)}
                      class="btn-light dp-ib mt-1"
                    >
                      删除
                    </span>
                  </div>
                );
                break;
              case 4:
                val = (
                  <div>
                    <span
                      onClick={this.articleDetail.bind(this, m)}
                      class="btn-deep dt-clr mt-1"
                    >
                      查看
                    </span>
                  </div>
                );
                break;
            }
            /* 
            
            */
            return <div>{val}</div>;
          },
        },
      ],
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    //批量删除
    del_more() {
      this.$confirm("此操作将批量删除处方文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = this.multipleSelection.map((i) => i.id).toString();
          this.loading=true
          encyclopedia_del(ids).then((res) => {
             this.loading=false
            if (res.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getdata();
            } else {
              this.$message.error("删除失败，请重试！");
            }
          });
        })
        .catch(() => {
            this.loading=false
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getdata() {
       this.loading=true
      encyclopedia({
        page: this.pagination.page,
        rows: this.pagination.rows,
      })
        .then((res) => {
           this.loading=false
          this.dataList = res.result.rows;
          this.pagination.total = Number(res.result.total);
        })
        .catch((err) => {
            this.loading=false
          console.log(err, "获取健康科普列表失败");
        });
    },
    // 改变页码
    handlePageChange(page) {
      this.pagination.page = page;
      this.getdata();
    },
    // 改变页数
    handleSizeChange(size) {
      this.pagination.rows = size;
      this.pagination.page = 1;
      this.getdata();
    },
    articleEdit(m) {
      this.$router.push({
        name:"addPopularization",
        params:m
      })
    },
    //文章詳情
    articleDetail(m) {
      this.$router.push({
        name: "popularizationDetail",
        params: m,
      });
    },
    //發起審核
    articleSub(e) {
       this.loading=true
      encyclopedia_shenhe(e.id)
        .then((res) => {
           this.loading=false
          if (res.code == 200) {
            this.$message({
              message: "操作成功！",
              type: "success",
            });
            this.getdata();
          } else {
            this.$message.error("删除失败，请重试！");
          }
        })
        .catch((err) => {
          console.log(err, "提交審核健康科普失败");
        });
    },
    articleDel(m) {
       this.loading=true
      encyclopedia_del(m.id)
        .then((res) => {
           this.loading=false
          if (res.code == 200) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getdata();
          } else {
            this.$message.error("删除失败，请重试！");
          }
        })
        .catch((err) => {
          console.log(err, "删除健康科普失败");
        });
    },
    //勾选
    handlechange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  tableAssembly {
    width: 100%;
  }
}
.btn-edit {
  background: #fbad3f !important;
}
.dt-clr {
  background: #68cabe !important;
}
</style>